<!-- 个性化 -->
<template>
  <div class="individuation">
    <el-scrollbar>
      <div class="title-bar">个性颜色</div>
      <div class="row-wrap">
        <ColorPicker v-for="item in pickerItems" :key="item.title" :rowInfo="item" />
      </div>

      <div class="title-bar">个性颜色</div>
      <div class="row-wrap">
        <el-row class="row">
          <el-col :span="2">
            <el-image class="icon" :src="iconList[0]" style="width: 30px; height: 30px" />
          </el-col>
          <el-col :span="18">
            <div class="center">
              <span class="title">主题颜色</span>
              <span class="desc">设置全局主色调</span>
            </div>
          </el-col>
          <el-col :span="3">
            <el-color-picker v-model="color" />
          </el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="2">
            <el-image class="icon" :src="iconList[0]" style="width: 30px; height: 30px" />
          </el-col>
          <el-col :span="18">
            <div class="center">
              <span class="title">主题颜色</span>
              <span class="desc">设置全局主色调</span>
            </div>
          </el-col>
          <el-col :span="3">
            <el-color-picker v-model="color" />
          </el-col>
        </el-row>
        <el-row class="row">
          <el-col :span="2">
            <el-image class="icon" :src="iconList[0]" style="width: 30px; height: 30px" />
          </el-col>
          <el-col :span="18">
            <div class="center">
              <span class="title">主题颜色</span>
              <span class="desc">设置全局主色调</span>
            </div>
          </el-col>
          <el-col :span="3">
            <el-color-picker v-model="color" />
          </el-col>
        </el-row>
      </div>
    </el-scrollbar>
  </div>
</template>

<script lang="ts" setup>
import ColorPicker from '@/components/color-picker'
import { pickerItems } from './config'


import { importIndividuationIcon } from '@/utils/import-icon'
const iconList = importIndividuationIcon()
const color = '#409eff'


</script>

<style lang="less" scoped>
.title-bar {
  margin: 15px 0 15px 10px;
}
.row-wrap {
  // padding: 6px 10px 0 0;
  padding-left: 10px;
  .row {
    // margin-left: 10px;
    margin: 8px 10px 8px 0;
    height: 55px;
    background: rgba(255, 255, 255, .6);
    border-radius: 6px;
    .icon {
      margin: 12px 0 0 12px;
    }
  }
}
.center {
  padding-top: 10px;
  .title, .desc {
    display: block;
  }
  .title {
    color: #333;
    font-size: 14px;
  }
  .desc {
    color:  #888;
    font-size: 12px;
  }
}
:deep(.el-color-picker) {
  width: 100%;
  margin-top: 12px;
}
:deep(.el-color-picker__trigger) {
  width: 100%;
}
</style>
